<template>
  <div style="padding: 20px">
    <section id="statistics">
      <div class="top">
        <div class="left">
          <Icon type="ios-bookmark" style="vertical-align:middle" />
          <i>设备使用日志</i>
        </div>
        <div class="time">
          <DatePicker
            format="yyyy/MM/dd"
            placeholder="创建时间"
            type="daterange"
            show-week-numbers
            @on-change="dateChange"
            split-panels
            v-model="bloc.form.date"
            style="width: 200px;margin-right:5px"
          ></DatePicker>
        </div>
      </div>
      <div class="bottom">
        <Table
          border
          :loading="bloc.loading"
          :columns="columns2"
          highlight-row
          :data="bloc.paged.items"
        >
<!--          <template slot-scope="{ row }" slot="action">-->
<!--            <Button size="small" type="error" @click="removeItem(row)">-->
<!--              删除-->
<!--            </Button>-->
<!--          </template>-->
          <slot name="footer" slot="footer">
            <Page
              show-elevator
              show-total
              show-sizer
              :total="bloc.paged.itemCount"
              :current="bloc.paged.pageIndex"
              :page-size="bloc.paged.pageSize"
              :page-size-opts="[15, 30, 50, 100]"
              @on-change="val=>bloc.load(val, bloc.paged.pageSize, this.memberId)"
              @on-page-size-change="val=>bloc.load(bloc.paged.pageIndex, val, this.memberId)"
            />
          </slot>
        </Table>
      </div>
    </section>
  </div>
</template>
<script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator';
    import {formatDate} from '@/base/util/Dates';
    import {MassageLogBloc} from '@/view/family/component/MassageLogBloc';
    import {DeviceUse} from '@/base/model/DeviceUse';

    @Component({
        components: {}
    })
    export default class extends Vue {
        @Prop(Number) memberId!: number;
        columns2 = [
            {
                title: 'ID',
                key: 'id',
                align: 'left',
                minWidth: 160,
                tooltip: true
            },
            // {
            //     title: '昵称',
            //     key: 'nickname',
            //     align: 'left',
            //     minWidth: 100,
            //     tooltip: true
            // },
            // {
            //     title: '关联电话',
            //     key: 'phone',
            //     align: 'left',
            //     minWidth: 100,
            //     tooltip: true
            // },
            {
                title: '模式名称',
                key: 'modeName',
                align: 'left',
                minWidth: 100,
                tooltip: true
            },
            {
                title: '使用时长',
                key: 'lifetime',
                align: 'left',
                minWidth: 100,
                tooltip: true
            },
            {
                title: '创建时间',
                align: 'left',
                render: (h: any, params: any) => {
                    return h('span', {
                        domProps: {
                            innerText: formatDate(new Date(params.row.created), 'yyyy-MM-dd hh:mm:ss')
                        }
                    });
                },
                minWidth: 160,
                tooltip: true
            }
            // {
            //     title: '操作',
            //     slot: 'action',
            //     width: (47 * 1) + (61 * 0) + (75 * 0) + 20,
            //     align: 'left',
            //     tooltip: true
            // }
        ];
        bloc: MassageLogBloc = new MassageLogBloc();

        dateChange() {
            this.bloc.load(1, 15, this.memberId).catch(e => {
                this.$Message.error('操作错误');
            });
        }

        // removeItem(dataItem: DeviceUse) {
        //     this.$Modal.confirm({
        //         title: '提示',
        //         content: '确认删除后将无法恢复！还要继续吗？',
        //         okText: '删除',
        //         cancelText: '取消',
        //         onOk: () => {
        //             this.bloc.removeItem(dataItem).then(value => {
        //                 this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize, this.memberId);
        //             }).then(() => {
        //                 this.$Message.success('删除成功');
        //             }).catch(e => {
        //                 this.$Message.error('删除失败');
        //             });
        //         }
        //     });
        // }

        mounted() {
            this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize, this.memberId).catch(e => {
                this.$Message.error('操作错误');
            });
        }
    }
</script>
<style lang="less" scoped>
  #statistics {
    .top {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      margin-left: 20px;

      i {
        font-size: 20px;
      }

      .time {
        float: right;
        margin-right: 300px;
      }
    }
  }
</style>
